import React, { useRef } from "react"

const GetDomByUseRef = () => {
  const inputRef = useRef<HTMLInputElement>(null)

  const handleClick = () => {
    console.log(inputRef.current)
    inputRef.current?.focus() // 聚焦
  }

  return (
    <div>
      <h1>点击按钮聚焦输入框</h1>
      <input type='text' ref={inputRef} />
      <div>
        <button onClick={handleClick}>聚焦/失焦输入框</button>
      </div>

      <hr />
      <h1
        ref={(thisDom: any) => {
          console.log(thisDom)
          thisDom.style.background = "skyblue"
        }}
      >
        ref 的回调写法
      </h1>
    </div>
  )
}

export default GetDomByUseRef
